<template>
  <div class="classify_wrap">
    <div id="my-markdown" class="markdown-body">
      <vue-markdown @rendered="rendered()" :source="md"></vue-markdown>
    </div>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";

export default {
  data() {
    return {
      md: "",
    };
  },
  destroyed() {
    console.log(123);
  },

  mounted() {
    this.http
      .get(
        "adminapi/blogs/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/5.2.0%20%E6%B5%85%E5%A4%8D%E5%88%B6%E5%92%8C%E6%B7%B1%E5%A4%8D%E5%88%B6%EF%BC%9F%E6%80%8E%E6%A0%B7%E5%AE%9E%E7%8E%B0%E6%B7%B1%E5%A4%8D%E5%88%B6%EF%BC%9F.md"
      )
      .then((res) => {
        console.log(res.data);
        this.md = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  components: {
    VueMarkdown,
  },
  methods: {
    // 渲染后的事件
    rendered() {
      console.log(123);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep p {
  color: #666 !important;
}
::v-deep h4 {
  color: #666 !important;
}
::v-deep h3 {
  color: #666 !important;
}
::v-deep h2 {
  color: #666 !important;
}
::v-deep h1 {
  color: #666 !important;
}
::v-deep h5 {
  color: #666 !important;
}
::v-deep h6 {
  color: #666 !important;
}
// ::v-deep pre {
//   width: 500px!important;
// }
.markdown-body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 40px;
  width: 1110px;
  background-color: rgb(255, 255, 255);
}

@media screen and (max-width: 1000px) {
  .markdown-body {
    width: 95%;
    ::v-deep h4 {
      font-size: 30px !important;
    }
    ::v-deep p {
      font-size: 30px !important;
    }
    ::v-deep pre {
      font-size: 30px !important;
    }
  }
}
</style>
